<template>
  <div>
    <!--
      action 必填，但是后面我们用腾讯云所以就放一个 # 即可
      list-type="picture-card"  决定样式，图片墙样式
      :file-list="" 是用来管理当前文件列表的，是一个数组
     -->
    <!--
       附加功能
       on-preview 添加以后多了一个放大镜，点击后自己写弹窗
        :class 在已经有一张图片的情况下，不显示上传图标
      -->
    <!--
        交互钩子
        on-remove 删除
        on-change 修改 (不能用 on-success 因为根本没有上传成功)
        http-request  覆盖默认上传行为，自定义上传实现
       -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"

      :on-preview="preview"
      :class="{disable:fileList.length > 0 }"

      :on-remove="remove"
      :on-change="changeImage"
      :http-request="upload"

      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 进度条 -->
    <el-progress v-if="showProgress" :percentage="percentage" :show-text="false" style="width:146px;" />

    <!-- 弹窗，显示预览的图片 -->
    <el-dialog title="图片预览" :visible="showDialog" @close="showDialog = false">
      <img :src="previewSrc" alt="">
    </el-dialog>
  </div>
</template>

<script>
// 需要使用腾讯云的专用工具库上传图片
// 下载安装 npm i cos-js-sdk-v5 --save
// 引入 cos
import COS from 'cos-js-sdk-v5'
// 创建工具库实例，带上一个配置对象，记录验证身份的 id 和 key
const cos = new COS({
  SecretId: 'AKIDiIepqi9dFf4FG3TGifGAJZaM0PdcKOip',
  SecretKey: 'wcBTXbQ6FExYuGORHuKhrkVHK7d2GFyx'
})
export default {
  data() {
    return {
      fileList: [],
      showDialog: false, // 弹窗是否显示
      previewSrc: '', // 预览图片路径
      percentage: 0, // 进度条的进度
      showProgress: false // 进度条是否显示
    }
  },
  methods: {
    // 显示放大镜
    preview(file) {
      console.log(file)
      this.showDialog = true
      this.previewSrc = file.url
    },
    // 删除图片
    remove(file, fileList) {
      // file: 是当前被删除的图片
      // fileList 是当前图片删除完之后的最新数组
      // console.log(file, fileList)
      this.fileList = [...fileList]
    },
    // 上传图片时触发
    changeImage(file, fileList) {
      // file: 是当前上传的图片
      // fileList 是当前图片上传完之后的最新数组
      // console.log(file, fileList)
      this.fileList = [...fileList]
    },
    // 覆盖action默认的上传行为
    upload(data) {
      console.log(data)
      if (data.file) {
        // 执行上传操作
        // 两个参数，第一个配置对象，第二个上传完的回调函数(错误，成功)
        cos.putObject({
          // 储存桶名字
          Bucket: 'renzhi60-1305693815',
          // 所在区域
          Region: 'ap-guangzhou',
          // 要存在远程的文件名
          Key: Date.now() + data.file.name,
          // 文件本体
          Body: data.file,
          // 储存类型，固定写法
          StorageClass: 'STANDARD',
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
          // 上传图片进度
          onProgress: (progressData) => {
            console.log(progressData)
            // 上传图片进度条，百分比
            this.percentage = progressData.percent * 100
          }
        }, (err, data) => {
          // 需要用箭头函数，里面的this才代表当前组件
          // data返回数据之后 应该如何处理
          if (!err) {
            console.log('上传成功')
            console.log(data)
            // 这里是上传成功后的回调，不确定什么时候执行
            // 要将后续处理放在这
            // 将选中图片的 url 从本地图片改成线上地址
            this.fileList[0].url = 'http://' + data.Location
            // 绿色小勾显示出来
            this.fileList[0].status = 'success'

            // 上传成功之后隐藏进度条
            setTimeout(() => {
              this.showProgress = false
            }, 1000)
          }
        })
      }
    },
    // 上传文件前的校验逻辑
    beforeUpload(file) {
      // 判断上传图片的类型
      console.log(file)
      // 定义白名单
      const type = ['image/jpeg', 'image/jpg', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.warning('上传图片类型只能是 jpeg/jpg/png 格式')
        return false
      }
      // 判断图片大小
      const maxsize = 200 * 1024
      if (file.size > maxsize) {
        this.$message.warning('上传图片大小在 200k 以内')
        return false
      }
      // 显示进度条
      this.showProgress = true
    }
  }
}
</script>

<style lang="scss" scoped>
// less 深度监听 /deep/
// scss 深度监听 ::v-deep
// css  深度监听 >>>
::v-deep .el-dialog__wrapper{
  img{
    width: 400px;
  }
}
.disable{
  ::v-deep .el-upload{
    display: none;
  }
}
</style>
